<!DOCTYPE html>
<html lang="zxx" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <title>Business</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8"/>
    <link rel="icon" href="images/favicon.ico">
    <meta name="keywords" content=""
    />
    <script>
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <!--// Meta tag Keywords -->

    <!-- Custom-Files -->
    <!-- Bootstrap-Core-Css -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- Style-Css -->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all"/>
    <!-- Font-Awesome-Icons-Css -->
    <link rel="stylesheet" href="css/fontawesome-all.css">
    <!-- //Custom-Files -->

    <!-- Web-Fonts -->
    <link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese"
          rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i"
          rel="stylesheet">
    <!-- //Web-Fonts -->
<style>

</style>
</head>

<body>
<!-- header -->
<div th:replace="include/header::#fragment-id"></div>
<!-- //header -->

<div>
    <ul class="slider">
        <li class="active">
            <div >
            </div>
        </li>
    </ul>
    <div class="banner-text-posi-w3ls">

    </div>

    <div th:replace="include/header::#banner"></div>
    <img src="images/course.jpg" alt="" class="img-fluid">
</div>
<!-- breadcrumb -->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="index.html">首页</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">专业课程</li>
    </ol>
</nav>
<!-- breadcrumb -->
<!-- //banner -->

<!-- course-->
<div class="course-w3ls py-5">
    <div class="container py-xl-5 py-lg-3">
        <h3 class="title text-capitalize font-weight-light text-dark text-center mb-5">course -
            <span class="font-weight-bold">简介</span>
        </h3>
        <div th:each="p,i : ${professionList}">
            <div class="row cource-list-agile cource-list-agile-2" th:if="${i.index%2==0}">
                <div class="col-lg-5 agile-course-main-3 mt-4">
                    <img src="images/course2.png" th:src="@{${p.imagePath}}" alt="" class="img-fluid">
                </div>
                <div class="col-lg-7 agile-course-main text-right">
                    <div class="w3ls-cource-first">
                        <img src="images/2.png" alt="" class="img-fluid img-poiscour mx-auto d-block mt-2"></img>
                        <div class="px-md-5 px-4  pb-md-5 pb-4">
                            <h3 class="text-dark" th:text="${p.name}"></h3>
                            <p class="mt-3 mb-4 pl-lg-4"><span th:text="${p.remark}"></span></p>
                            <ul class="list-unstyled text-capitalize">
                                <li>报名时间：<span th:text="${#dates.format(p.createTime, 'yyyy-MM-dd')}"></span>
                                    <i class="fas fa-calendar-alt ml-3"></i>
                                </li>
                                <li class="my-3">学习时间：<span th:text="${p.studyTime}"></span>年
                                    <i class="fas fa-clock ml-3"></i>
                                </li>
                                <li>剩余名额：<span th:text="${p.number}"></span>人
                                    <i class="fas fa-users ml-3"></i>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="buttons-w3ls-2">
                    <a class="btn button-cour-w3ls text-white" th:href="@{photography(id=${p.id})}" role="button">课程详情</a>
                </div>
            </div>
            <div class="row cource-list-agile pt-4"  th:if="${i.index%2==1}">
                <div class="col-lg-7 agile-course-main">
                    <div class="w3ls-cource-first">
                        <img src="images/1.png" alt="" class="img-fluid img-poiscour mx-auto d-block mt-2"></img>
                        <div class="px-md-5 px-4  pb-md-5 pb-4">
                            <h3 class="text-dark" th:text="${p.name}"></h3>
                            <p class="mt-3 mb-4 pr-lg-5"><span th:text="${p.remark}"></span></p>
                            <ul class="list-unstyled text-capitalize">
                                <li>
                                    <i class="fas fa-calendar-alt mr-3"></i>
                                    报名时间：<span th:text="${#dates.format(p.createTime, 'yyyy-MM-dd')}"></span>
                                </li>
                                <li class="my-3">
                                    <i class="fas fa-clock mr-3" ></i>
                                    学习时间：<span th:text="${p.studyTime}"></span>年
                                </li>
                                <li>
                                    <i class="fas fa-users mr-3"></i>
                                    剩余名额：<span th:text="${p.number}"></span>人
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 agile-course-main-2 mt-4">
                    <img src="images/course3.png" th:src="@{${p.imagePath}}"  alt="" class="img-fluid">
                </div>
                <div class="buttons-w3ls">
                    <a class="btn button-cour-w3ls text-white" th:href="@{photography(id=${p.id})}" role="button">课程详情</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- //course-->

<!--
<div class="course1">
    <div class="course2"><a onclick="closeChat()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;详情咨询&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
</div>
-->

<!-- footer -->
<div th:replace="include/header::#footer"></div>
<!-- //footer -->
<script>
    function closeChat() {
        console.info($("#jesong_chat_layout").css("height"))
        if ($("#jesong_chat_layout").css("height") === "40px") {
            $("#jesong_chat_layout").css("height", "620px").css("width", "500px")
        } else {
            $("#jesong_chat_layout").css("height", "40px").css("width", "100px")
        }
    }
</script>

<!-- Js files -->
<!-- JavaScript -->
<script src="js/jquery-2.2.3.min.js"></script>
<!-- Default-JavaScript-File -->
<script src="js/bootstrap.js"></script>
<!-- Necessary-JavaScript-File-For-Bootstrap -->

<!-- numscroller-js-file -->
<script src="js/numscroller-1.0.js"></script>
<!-- //numscroller-js-file -->

<!-- smooth scrolling -->
<script src="js/SmoothScroll.min.js"></script>
<!-- //smooth scrolling -->

<!-- move-top -->
<script src="js/move-top.js"></script>
<!-- easing -->
<script src="js/easing.js"></script>
<!--  necessary snippets for few javascript files -->
<script src="js/edulearn.js"></script>

<!-- //Js files -->


</body>

</html>